<template>
  <div class="csg-dialog" v-show="modelValue">
    <div class="csg-dialog__mask" @click="handleClose"></div>
    <div class="csg-dialog__wrapper">
      <div class="csg-dialog__header">
        <h3>{{ title }}</h3>
        <span type="text" @click="handleClose" class="csg-dialog__close">
          ×
        </span>
      </div>

      <div class="csg-dialog__body">
        <div class="csg-dialog__item">
          <label>名称：</label>
          <input type="text" v-model="name" placeholder="请输入名称" />
        </div>

        <div class="csg-dialog__item">
          <label>描述：</label>
          <input type="text" v-model="desc" placeholder="请输入描述" />
        </div>

        <div class="csg-dialog__item">
          <label>状态：</label>
          <select v-model="status">
            <option value="1">启用</option>
            <option value="0">禁用</option>
          </select>
        </div>

        <div class="csg-dialog__item">
          <label>权限：</label>
          <select v-model="role">
            <option value="1">管理员</option>
            <option value="2">普通用户</option>
          </select>
        </div>

          <!-- 时间模模块 -->
          <div class="csg-dialog__item">
            <label>时间：</label>
            <input type="text" v-model="time" placeholder="请选择时间" />
          </div>

          <!-- 上传文件 -->
          <div class="csg-dialog__item">
            <label>上传文件：</label>
            <input type="file" />
          </div>

          <!-- 开关 -->
          <div class="csg-dialog__item">
            <label>开关：</label>
            <input type="checkbox" v-model="switchValue" />
          </div>

          <!-- 单选 -->
          <div class="csg-dialog__item">
            <label>单选：</label>
            <input type="radio" name="radio" v-model="radioValue" value="1" />1
          </div>

          <!-- 多选 -->
          <div class="csg-dialog__item"> 
            <label>多选：</label>
            <input type="checkbox" name="checkbox" v-model="checkboxValue" value="1" />1
          </div>
      </div>

      <div class="csg-dialog__footer">
        <csg-button type="warning" @click="handleClose">取消</csg-button>
        <csg-button type="primary" @click="$emit('confirm')">确认</csg-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, toRefs } from 'vue';
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    default: '操作提示',
  },
  tableHeaderList: {
    type: Array,
    default: () => [],
  },
  tableList: {
    type: Array,
    default: () => [],
  },
  tableFooterList: {
    type: Array,
    default: () => [],
  },
});

const checkboxValue = ref([]);
const switchValue = ref(false);
const role = ref('');
const time = ref('');
const name = ref('');
const desc = ref('');
const status = ref('');
const radioValue = ref('');

console.log('props.tableHeaderList---->', props.tableHeaderList);

const emit = defineEmits(['update:modelValue', 'confirm']);

const handleClose = () => {
  emit('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.csg-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;

  &__mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }

  &__wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    min-width: 400px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  &__header {
    position: relative;
    padding: 20px;
    border-bottom: 1px solid #eaeaea;

    h3 {
      margin: 0;
      font-size: 16px;
      color: #333;
    }
  }

  &__close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 20px;
    color: #999;
    cursor: pointer;
  }

  &__body {
    padding: 20px;
    min-height: 100px;
  }

  &__footer {
    padding: 10px 20px;
    text-align: right;
    border-top: 1px solid #eaeaea;
    display: flex;
    &:nth-child(n) {
      margin: 10px;
    }
  }
}
</style>
